<template>
  <div class="enterprisesInResidenceCon">

    <div ref="maoyifangshi" class="maoyifangshi"></div>
    <!-- <div ref="enterpriseranking" class="enterpriseranking"></div>-->
  </div>

</template>

<script>
  export default {
    name: 'clearanceRate2',
    components: {

    },
    data() {
      return {
        clearanceRateShow: false,
        shenbao: 0,
        tongguan: 0,
        nowRATE: 0, //均价
        nowTAXES: 0, //税额
        KeDanJiaList: []
      }
    },
    mounted() {
      this.getMaoyifangshi();
      // this.getClearanceRateData();
      //setInterval(this.getClearanceRateData, 5000);
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getClearanceRateData() {
        const clearanceRate = this.$refs.clearanceRate;
        let _this = this;
        var that = this;
        let shenbao = 0;
        let tongguan = 0;
        /*申报/通关*/
        this.$myHttp.post("getTongGuanSHenBaoInfo")
          .then(function(data0) {
            if (data0.status == "200") {
              _this.shenbao = parseInt((data0.data.shenbao.XIADAN + data0.data.tongguan.DANLIANG) / 10000).toFixed(0);
              _this.tongguan = parseInt(data0.data.tongguan.DANLIANG / 10000).toFixed(0);

              tongguan = data0.data.tongguan.DANLIANG / 10000;
              tongguan = tongguan.toFixed(0);
              shenbao = data0.data.shenbao.XIADAN / 1000 + parseInt(tongguan);
              shenbao = shenbao.toFixed(0);
              let temptgl = parseInt(100000 * tongguan / shenbao) / 1000; // 通关率=通关数量/申报数量
              let tgl = temptgl.toFixed(2);
              let Rand = Math.random().toFixed(2);
              tgl = (parseFloat(tgl) + parseFloat(Rand)).toFixed(2).toString();
              if (tgl >= 100) {
                tgl = 99.99;
              }
              if (clearanceRate) {
                const myChart = _this.$echarts.init(clearanceRate)
                const option = {
                  title: {
                    text: '通关率',
                    left: 'center',
                    textStyle: {
                      color: "#fff",
                      fontWeight: "normal",
                      fontSize: that.commonFunction.fontSize(0.14),
                      lineHeight: that.commonFunction.fontSize(0.1),
                    },
                    subtext: "通关率=通关数量/申报数量", // 副标题文本
                    subtextStyle: {
                      color: '#fff',
                      fontSize: that.commonFunction.fontSize(0.12),
                      lineHeight: that.commonFunction.fontSize(0.1),
                      fontWeight: 'normal'
                    }, // 副标题样式
                  },
                  grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true
                  },
                  tooltip: {
                    formatter: '通关率 : {c}%'
                  },

                  series: [{
                    //类型
                    type: 'gauge',
                    //半径
                    radius: that.commonFunction.fontSize(0.5),

                    //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                    startAngle: 210,
                    //结束角度。
                    endAngle: -30,
                    center: ['50%', '70%'],
                    animationDuration: 2000, //动画时长
                    animationDelay: function(idx) {
                      return idx * 10 + 1000;
                    },
                    //仪表盘轴线相关配置。
                    axisLine: {
                      show: true,
                      // 属性lineStyle控制线条样式
                      lineStyle: {
                        width: that.commonFunction.fontSize(0.05),
                        // color: [[1, '#63869e']],
                        color: [
                          [1, 'red']
                        ]
                      }
                    },
                    //分隔线样式。
                    splitLine: {
                      show: true,
                    },
                    //刻度样式。
                    axisTick: {
                      show: true,
                    },
                    splitLine: {
                      show: true,
                      length: that.commonFunction.fontSize(0.1),
                    },
                    //刻度标签。
                    axisLabel: {
                      show: false,
                      fontWeight: 'bolder',
                      color: '#3fc7e1', //刻度数字颜色 隐藏
                      shadowColor: '#fff', //默认透明
                      shadowBlur: that.commonFunction.fontSize(0.08)
                    },
                    axisTick: {
                      length: that.commonFunction.fontSize(0.06),
                      lineStyle: {
                        shadowColor: '#3fc7e1',
                        shadowBlur: that.commonFunction.fontSize(1)
                      }
                    },

                    //仪表盘指针。
                    pointer: {
                      //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                      show: true,
                      //指针长度
                      length: '80%',
                      width: 3,
                    },
                    //仪表盘标题。
                    // title: {
                    //   show: true,
                    //   offsetCenter: [0, '-0%'], // x, y，单位px
                    //   textStyle: {
                    //     color: '#fff',
                    //     fontSize: that.commonFunction.fontSize(0.16)
                    //   }
                    // },
                    //仪表盘详情，用于显示数据。
                    detail: {
                      show: true,
                      offsetCenter: [0, '60%'],
                      formatter: '{value}%',
                      textStyle: {
                        fontSize: that.commonFunction.fontSize(0.12),
                        color: '#fff',
                      }
                    },
                    data: [{
                      value: 0,
                      // name: 'OEE'
                    }]
                  }]
                };
                var color = [
                  [80 / 100, '#1d82ff'],
                  [1, '#41ddeb']
                ];
                option.series[0].axisLine.lineStyle.color = color;
                option.series[0].data[0].value = tgl;
                myChart.setOption(option)
                window.addEventListener("resize", function() {
                  myChart.resize()
                })
              }
            }
          })
        /*均价/税额*/
        this.$myHttp.post("getKeDanJia")
          .then(function(data0) {
            if (data0.status == "200") {
              let date = new Date();
              let nowYear = date.getFullYear();
              data0.data.hn_average.forEach((item, index) => {
                if (item.YEAR == nowYear) {
                  _this.nowRATE = item.RATE;
                  _this.nowTAXES = item.TAXES;
                }
                _this.KeDanJiaList = data0.data.hn_average;

              })
            }

          })
      },

      getMaoyifangshi() {
        var that = this;
        const maoyifangshi = this.$refs.maoyifangshi;
        const myChart = this.$echarts.init(maoyifangshi);
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '15%', // 与容器左侧的距离
            right: '15%',
            top: '25%',
            bottom: '20%' // 与容器右侧的距离

          },
          xAxis: {
            name: '贸易方式',
            nameLocation: 'end',
            nameTextStyle: {
              color: '#c3dbff',
              fontSize: that.commonFunction.fontSize(0.1),
              width: that.commonFunction.fontSize(0.12),
              lineHeight: that.commonFunction.fontSize(0.14),
            },

            type: 'category',
            data: ['跨境电商贸易', '一般贸易',  '防疫物资', '汽配', '邮快件', '生鲜'],
            axisLabel: {
              axisTick: {
                show: false
              },
              axisLine: {
                formatter: function(value) {
                  let valueTxt = '';
                  if (value.length > 3) {
                    valueTxt = value.substring(0, 4) + '...';
                  } else {
                    valueTxt = value;
                  }
                  return valueTxt;
                },
                lineStyle: {
                  color: '#315070' //更改坐标轴颜色
                },
                show: true
              },
              interval: '0',
              rotate: '10',
              textStyle: {
                color: '#c3dbff',
                fontSize: that.commonFunction.fontSize(0.1),
                fontWeight: 100
              },
              boundaryGap: true
            },
            axisLine: {
              lineStyle: {
                color: '#315070' //更改坐标轴颜色
              }
            }

          },
          yAxis: {
            type: 'value',
            name: '单位：吨',
            nameLocation: 'end',
            nameTextStyle: {
              color: '#c3dbff',
              lineHeight: that.commonFunction.fontSize(0.1),
              fontSize: that.commonFunction.fontSize(0.1)
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#c3dbff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#315070' //更改坐标轴颜色
              }
            },
            splitLine: {
              show: false
            },

          },
          series: [{
            name: '业务(出口加进口)',
            type: 'bar',
            barWidth: '60%',
            data: [ 15483, 14976, 3593, 756, 416, 154],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  distance: 5, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                  verticalAlign: 'middle',
                  textStyle: { // 数值样式
                    color: 'fff',
                    fontSize: that.commonFunction.fontSize(0.12)
                  },
                  formatter: function(params) {

                    if (params.value) {
                      return that.formatNumberRgx(params.value)
                    } else {
                      return '';
                    }
                  },
                }
              }
            },
            color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#f2c38b'
            }, {
              offset: 1,
              color: '#dd8720'
            }]),



          }]
        };
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })


      },
      clearanceRateEnter(e) {
        this.clearanceRateShow = true;
      },
      clearanceRateLeave(e) {
        this.clearanceRateShow = false;
      }

    }
  }
</script>

<style>
  .clearanceRateCon {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

  }

  .clearanceRateCon>div:nth-of-type(1) {
    width: 58%;
    height: 100%;
  }

  .clearanceRateCon>div:nth-of-type(2) {
    width: 38%;
    height: 100%;
  }

  .clearance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .clearanceCon {
    width: 2.5rem;
    height: .3rem;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 0 .05rem;
    background: url(../../../../static/img/bg2.png);
    background-size: 100% 100%;
    margin-bottom: .05rem;
  }

  .clearanceConTit {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .clearanceConTit>img {
    width: .18rem;
    height: .18rem;

  }

  .clearanceConTit>span {
    width: 80%;
    font-size: .12rem;
    color: #fff;
    margin-left: .05rem;
  }

  .clearanceConTxt {
    width: 55%;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: .12rem;
    justify-content: flex-end;
  }

  .clearanceConTxt>span:nth-of-type(1) {
    width: 70%;
    font-size: .12rem;
    color: #20f2ff;
    text-align: right;
  }

  .clearanceConTxt>span:nth-of-type(2) {
    font-size: .12rem;
  }


  .clearanceRateConTck {
    width: 95%;
    height: 90%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;
    background: rgba(2, 6, 86, 0.8);
    padding: .05rem;
    box-sizing: border-box;
    pointer-events: none;
  }

  .clearanceRateConTckTit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2246a6;
    height: .3rem;
  }

  .clearanceRateConTckTit>span {
    height: .3rem;
    line-height: .3rem;
    text-align: center;
    color: #fdd000;
    font-size: .14rem;
  }

  .clearanceRateConTckCon {
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: red; */
  }

  .width20 {
    width: 20%;
  }

  .width40 {
    width: 40%;
  }

  .clearanceRateConTckList {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .22rem;
    font-size: .12rem;
    width: 100%;
  }

  .clearanceRateConTckList>div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .clearanceRateConTckList>div>span {
    border-radius: .03rem;
    width: .16rem;
    height: .16rem;
    color: #fff;
    background: #2246a6;
    line-height: .16rem;
    text-align: center;
    font-size: .12rem;
  }

  .clearanceRateConTckList:nth-child(1)>div>span {
    background: #ed174f;
  }

  .clearanceRateConTckList:nth-child(2)>div>span {
    background: #ff4200;
  }

  .clearanceRateConTckList:nth-child(3)>div>span {
    background: #fdd000;
  }

  .clearanceRateConTckList>span {
    height: .3rem;
    line-height: .3rem;
    text-align: center;
    color: #fff;
    font-size: .11rem;
  }

  .hide {
    display: none;
  }
</style>
